<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-button{
            display: inline-flex;
            justify-content: center;
            align-items: center;
            line-height: 1;
            height: 32px;
            white-space: nowrap;
            cursor: pointer;
            background-color: #ffffff;
            border: 1px solid #dcdfe6;
            border-color: #dcdfe6;;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            transition: .1s;
            font-weight: 500;
            user-select: none;
            vertical-align: middle;
            padding: 8px 15px;
            font-size: 14px;
            border-radius: 4px;
        }
        .el-button--primary{
            color: white;
            background-color: #409eff;
        }
        .el-button--success{
            color: white;
            background-color: #67c23a;
        }
        .el-button--large{
            height: 40px;
            padding: 12px 19px;
            font-size: 14px;
        }
        .el-button--small{
            height: 24px;
            padding: 5px 11px;
            font-size: 12px;
            border-radius: 3px;
        }
    </style>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app">
        <el-button>default</el-button>

        <!--1:查看样式，定义type .el-button--primary拼接type-->
        <el-button type="primary" size="large">primary</el-button>
        <el-button type="success" size="small">success</el-button>
        <el-button type="success" size="small">
            <template #icon>
                <i class="iconfont iconfangdajing"></i>
            </template>
            success2
        </el-button>

        <el-button type="success" size="small">
            <template #icon>
                <i class="iconfont iconzuojiantou"></i>
            </template>
            success3
        </el-button>

    </div>
    <script>
        let ElButton = {
            data(){
                return {
                    buttonClass:{
                        'el-button':true,
                        // 3:类型不是空直接赋值
                        [`el-button--${this.type}`]:this.type !== '',
                        [`el-button--${this.size}`]:this.size !== ''
                    }
                }
            },
            // 2:定义props type获取type
            props:{
                type:{
                    type:String,
                    default:''
                },
                size:{
                    type:String,
                    default:''
                }
            },
            template: `
                <button :class="buttonClass">
                  <!--具名slot 一个处理图标，一个处理按钮-->
                  <slot name="icon"></slot>
                  <slot></slot>
                </button>
            `
        }

        let app = Vue.createApp({
            data(){
                return {
                }
            },
            components:{
                ElButton
            },
        })

        let vm = app.mount('#app');
    </script>

</body>
</html>